<template>
	<view class="container flex">
		<image class="bg" src="../../static/img/login-bg.png" mode=""></image>
		<view class="contentBox">
			<view class="flex-ac flex-b">
				<view>
					<view class="text">
						<view style="font-size: 50rpx;font-weight: bold;">你好！</view>
						<view style="font-size: 30rpx; margin-top: 15rpx;">欢迎使用怀明运输调度系统-调度员端</view>
					</view>
				</view>
			</view>
			<view class="checkBox">
				<view class="check-tit flex-ac">
					<view class="check-nav" :class="{'sel': nav == 1, 'radius': nav == 2}" @click="changeNav(1)">账号密码登录 <view
							v-if="nav == 1" class="line"></view>
					</view>
					<view class="check-nav sel"></view>
				</view>
				<view class="inputBox">
					<view class="input">
						<u-input type="text" :custom-style='inputStyle' v-model="account" placeholder="请输入手机号" :clearable='true'
							height="110" placeholder-style="color: #ACAFBF" />
					</view>
					<view class="input" style="margin-top: 30rpx;" v-if="nav == 1">
						<u-input :custom-style='inputStyle' type="password" v-model="pwd" placeholder="请输入密码" :clearable='true'
							height="110" placeholder-style="color: #ACAFBF" />
					</view>
					<view class="input flex-ac flex-b" style="margin-top: 30rpx;" v-if="nav == 2">
						<u-input :custom-style='inputStyle' type="number" v-model="yzm" placeholder="请输入验证码" :clearable='true'
							height="110" placeholder-style="color: #ACAFBF" />
						<view style="color: #51C036;" v-if="numShow" @click="getNum()">获取验证码</view>
						<view style="color: #999;" v-if="!numShow">{{num}}s</view>
					</view>
					<view style="margin-top: 100rpx;">
						<u-button type="primary" :disabled='!isLogin' :custom-style="customStyle" @click="loginHandle">登录</u-button>
					</view>
				</view>
			</view>
		</view>
		<view class="agreeBox flexmid" @click="agree = !agree">
			<image v-if="!agree" src="../../static/img/choice_no.png" mode=""></image>
			<image v-if="agree" src="../../static/img/choice_gou.png" mode=""></image>
			<view class="flex-ac">
				我已阅读并同意<view style="color: #1784FC;" @click.stop="$Jump.Open('/pages/user/setting/yhxy')">《用户协议》</view>和<view
					style="color: #1784FC;" @click.stop="$Jump.Open('/pages/user/setting/yszc')">《隐私政策》</view>
			</view>
		</view>

		<!-- 弹窗 -->
		<u-popup v-model="show" mode="center" border-radius="14" viewColor='transparent'>
			<view class="flex-ac flex-b" style="background-color: transparent; width: 620rpx;">
				<image src="../../static/img/grzc.png" class="zhuc" mode="" @click="$Jump.Open('./registerGr/registerGr')">
				</image>
				<image src="../../static/img/qyzc.png" class="zhuc" mode="" @click="$Jump.Open('./registerQy/registerQy')">
				</image>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				inputStyle: {
					fontSize: '30rpx'
				},
				customStyle: {
					borderRadius: '20rpx',
					height: '110rpx',
					// background: '#51C036 !important',
				},
				nav: 1,
				account: '',
				pwd: '',
				yzm: '',
				agree: false,
				num: 60,
				numShow: true,
				show: false,
				wxCode: '',
				type: 2, // 1自动登录  2手动登录
			}
		},
		onLoad(opt) {
			if (opt) console.log('opt:', opt)
			if(opt.type) this.type = opt.type
		},
		onShow() {
			uni.removeStorageSync('token')
			uni.removeStorageSync('user')
			uni.removeStorageSync('userType')
			if (uni.getStorageSync('account')) {
				this.account = uni.getStorageSync('account')
			}
			this.show = false
		},
		computed: {
			isLogin() {
				let status = false
				if (this.nav == 1) {
					if (this.account && this.pwd) {
						status = true
					} else {
						status = false
					}
				}
				if (this.nav == 2) {
					if (this.account && this.yzm) {
						status = true
					} else {
						status = false
					}
				}
				// console.log('status:', status)
				return status
			},
		},
		methods: {
			changeNav(n) {
				this.nav = n
			},
			login() {
				// this.$Jump.reLaunch('/pages/index/index')
				if (!this.agree) return this.$Toast.message('请阅读并同意《用户协议》和《隐私政策》')
				// #ifdef MP-WEIXIN
					uni.login({
						provider: 'weixin', //使用微信登录
						success: (res) => {
							console.log('微信登录：', res)
							this.wxCode = res.code
							this.loginHandle()
						}, 
						fail: (error) => {
							console.log('微信登录：', error)
							return this.$Toast.message('微信code获取失败')
						}
					})
				// #endif
			},
			loginHandle() {
				// this.$Jump.reLaunch('/pages/index/index')
				if (!this.agree) return this.$Toast.message('请阅读并同意《用户协议》和《隐私政策》')
				if (this.nav == 1) {
					this.$Net.post('/login', {
						username: this.account,
						password: this.pwd,
					}).then(res => {
						console.log('登录：', res)
						uni.setStorageSync('token', res.data.token)
						uni.setStorageSync('userName', res.data.name)
						uni.setStorageSync('account', this.account)
						this.$Toast.messageIcon("登录成功")
						setTimeout(() => {
							this.$Jump.reLaunch('/pages/index/index')
						}, 1500)
					})
				} else {
					this.$Net.post('/consignorApi/consignor/verCodeLogin', {
						account: this.account,
						verCode: this.yzm,
						wxCode: this.wxCode
					}).then(res => {
						console.log('登录：', res)
						uni.setStorageSync('token', res.data.token)
						uni.setStorageSync('user', res.data.loginUser)
						uni.setStorageSync('userType', res.data.loginUser.userType)
						uni.setStorageSync('account', this.account)
						this.$Toast.messageIcon("登录成功")
						setTimeout(() => {
							this.$Jump.reLaunch('/pages/index/index')
						}, 1500)
					})
				}
			},

			// 获取验证码
			getNum: function() {
				if (this.account == '') {
					this.$Toast.message("请输入手机号", false)
					return false
				} else {
					// var mobile = this.$Validate.tel(this.account)
					if (this.account.length != 11) {
						this.$Toast.message("手机号格式不正确", false)
						return false
					}
				}

				this.$Net.post("/consignorApi/consignor/sendLoginMessage", {
					phone: this.account,
					// smsTypeEnum: 1,
					// templateCode: 1
				}).then(res => {
					console.log('发送验证码：', res)
					this.$Toast.messageIcon('发送成功', false)
					this.numShow = false
					this.interval = setInterval(() => {
						--this.num
					}, 1000)
					setTimeout(() => {
						clearInterval(this.interval)
						this.numShow = true
						this.num = 60
					}, 60000)
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f9f9f9;
	}
</style>

<style lang="scss" scoped>
	// @import './style.scss';
	.tips {
		font-size: 26rpx;
		color: #999999;
		text-align: right;
		margin-top: 30rpx;
	}

	.zhuc {
		width: 290rpx;
		height: 400rpx;
	}

	.container {
		width: 100vw;
		height: 100vh;
		position: relative;

		.bg {
			width: 100%;
			height: 100%;
		}

		.contentBox {
			width: 670rpx;
			position: absolute;
			top: 224rpx;
			left: 50%;
			transform: translateX(-50%);

			.nh {
				width: 144rpx;
				height: 68rpx;
			}

			.text {
				font-size: 34rpx;
				color: #3F4151;
				margin-top: 20rpx;
			}

			.logo {
				width: 316rpx;
				height: 296rpx;
				position: relative;
				margin-right: -40rpx;
			}

			.checkBox {
				width: 100%;
				// height: 710rpx;
				margin-top: 60rpx;
				background-color: #fff;
				border: 1rpx solid rgba(23, 92, 252, 0.09);
				border-radius: 20rpx;
				overflow: hidden;

				.check-tit {
					width: 100%;
					height: 100rpx;

					.check-nav {
						flex: 1;
						height: 100rpx;
						background-color: #F3FCFE;
						color: #777C99;
						font-size: 30rpx;
						position: relative;
						text-align: center;
						line-height: 100rpx;

						.line {
							width: 50rpx;
							height: 8rpx;
							border-radius: 4rpx;
							background-color: #1784FC;
							position: absolute;
							bottom: 2rpx;
							left: 50%;
							transform: translateX(-50%);
						}
					}

					.sel { 
						font-weight: bold;
						color: #1784FC;
						background-color: #fff;
					}

					.radius1 {
						border-radius: 0 0 0 20rpx;
					}

					.radius {
						border-radius: 0 0 20rpx 0;
					}

				}

				.inputBox {
					width: 100%;
					padding: 60rpx 30rpx;

					.input {
						width: 100%;
						height: 110rpx;
						background-color: #F5F7FB;
						border-radius: 20rpx;
						padding: 0 30rpx;

						input {
							width: 100%;
							height: 100%;
							line-height: 110rpx;
							color: #3F4151;
							font-size: 30rpx;
						}
					}
				}
			}
		}

		.agreeBox {
			width: 100%;
			position: fixed;
			bottom: 100rpx;
			left: 0;
			font-size: 26rpx;
			color: #777C99;

			image {
				width: 30rpx;
				height: 30rpx;
				margin-right: 10px;
			}
		}
	}
</style>